<template>
      <!-- 弹框 -->
    <el-dialog
        title="教室预约"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="closeDialog"
        :close-on-click-modal="false"
    >
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" :disabled="editFlag">
          <el-row>
            <el-col :span="24">
              <el-form-item label="会议名称" style="width: 100%" prop="subject">
                <el-input v-model="ruleForm.subject" placeholder="请输入会议名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="会议申请原因" style="width: 100%" prop="memo">
                <el-input v-model="ruleForm.memo" placeholder="请输入教室申请原因"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="教室使用人" prop="applicantId">
                <el-select
                    style="width: 100%"
                    v-model="ruleForm.applicantId"
                    filterable
                    remote
                    placeholder="请选择教室使用人"
                    @focus="tagFoucs"
                    @change='userChage'
                    :remote-method="remoteMethod"
                    :loading="userSearchLoading ">
                  <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.nickName"
                      :value="item.id">
                      <span style="float: left">{{ item.nickName }}</span>
                      <span style="float: left">（{{ item.userName }}）</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" style="width: 100%" prop="extNo">
                <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
                <el-input v-model="ruleForm.extNo" maxlength="11" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="教室地点" style="width: 100%" prop="roomId">
                <el-select v-model="ruleForm.roomId" @change="change" placeholder="请选择教室地点" style="width: 100%">
                  <el-option
                      v-for="item in classRoomList"
                      :key="item.roomId"
                      :label="item.roomName"
                      :value="item.roomId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用">
                <div class="remark">
					<span v-if="roomInfo && roomInfo.cost">
						{{ `${roomInfo.cost}/h` }}
					</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="会议类型" style="width: 100%" prop="typeId">
                <el-select v-model="ruleForm.typeId" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                      v-for="item in roomTypeList"
                      :key="item.purposeId"
                      :label="item.purposeName"
                      :value="item.purposeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" style="width: 100%">
                <!-- <el-input v-model="roomInfo.remark" disabled ></el-input> -->
                <div class="remark">
					<span v-if="roomInfo && roomInfo.remark">
						{{ roomInfo.remark }}
					</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="参与人数" prop="userNumber">
                <el-input v-model.number="ruleForm.userNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始日期" style="width: 100%" prop="showStartDate">
                <el-date-picker
                    v-model="ruleForm.showStartDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    @change="startDateChoose"
                    :picker-options='pickerOptions'
                    style="width: 100%"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-time-select
                  v-model="ruleForm.showStartTime"
                  default-value='10:00'
                  :picker-options="{
					start: '00:00',
					step: '00:30',
					end: '23:30 ',
					minTime: minStartTime
				}"
                  placeholder="选择时间">
              </el-time-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="结束日期" style="width: 100%" prop="showEndDate">
                <el-date-picker
                    v-model="ruleForm.showEndDate"
                    @change="endDateChoose"
                    @input="daterangeChange"
                    type="date"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options='pickerOptions'
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-time-select
                  default-value='10:00'
                  @input="timeangeChange"
                  v-model="ruleForm.showEndTime"
                  :picker-options="{
					start: '00:00',
					step: '00:30',
					end: '23:30 ',
					minTime: minEndTime
				}"
                  placeholder="选择时间">
              </el-time-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="物资需求">
                <el-checkbox-group v-model="ruleForm.mrMaterialDtls">
                    <el-checkbox @change="checkChange(item)" v-for="item in materialList" :label="item.materialId"
                                :key="item.materialId">
                      {{ item.materialName }}
                    </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="其他需求">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入其他需求"
                    v-model="ruleForm.otherRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">关闭</el-button>
			<el-button type="primary" v-if="cancelMeetingStatus" @click="cancelMeeting">取消预约</el-button>
			<el-button v-if="!editFlag" type="primary" @click="addEvents('ruleForm')">确 定</el-button>
		</span>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            editFlag: false,
            dialogVisible: false,
            rules: {
            typeId: [
            {required: true, message: '请选择会议类型', trigger: 'change'}
            ],
            subject: [
            {required: true, message: '请输入会议名称', trigger: 'blur'}
            ],
            memo: [
            {required: true, message: '请输入会议申请原因', trigger: 'blur'}
            ],
            extNo: [
            {required: true, message: '请输入联系方式', trigger: 'blur'},
            //   {type: 'number', message: '联系方式必须为数字'}
            ],
            roomId: [
                {required: true, message: '请选择教室地点', trigger: 'change'}
            ],
            userNumber: [
                {required: true, message: '请输入参与人数', trigger: 'blur'},
                {type: 'number', message: '参与人数必须为数字'}
            ],
            showEndDate: [
            {required: true, message: '请选择日期', trigger: 'change'}
            ],
            showStartDate: [
            {required: true, message: '请选择日期', trigger: 'change'}
            ],
            showStartTime: [
            {required: true, message: '请选择时间', trigger: 'change'}
            ],
            showEndTime: [
            {required: true, message: '请选择时间', trigger: 'change'}
            ],
            applicantId: [
            {required: true, message: '请选择教室使用人', trigger: 'blur'}
            ]
        }
        }
    }

}
</script>

<style>

</style>